<template>
    <div class="searchTitle">
        <div class="pic">
            <img src="../../../../public/商品分类列表.svg" alt="">
            筛选
        </div>
    </div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
            <el-input v-model="formInline.user" placeholder="输入药品名" />
        </el-form-item>
        <el-form-item label="药品分类">
            <el-select v-model="formInline.region" placeholder="日常用药">
                <el-option label="日常用药" value="日常用药" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
            <el-select v-model="formInline.region" placeholder="日常用药">
                <el-option label="湿疹" value="日常用药" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>

        <el-form-item label="症状">
            <el-select v-model="formInline.region" placeholder="慢性病">
                <el-option label="慢性病" value="日常用药" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
            <el-select v-model="formInline.region" placeholder="高血压">
                <el-option label="高血压" value="日常用药" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="danger" @click="onSearch" class="searchBtn">筛选</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { getSearchKeyWords } from '../api/cate'


const router = useRouter()

const formInline = reactive({
    user: '',
    region: '',
})

const onSearch = () => {
    // alert('搜索成功')
    getSearchKeyWords().then(res => {
        console.log(res.data);
        if (res.data.code === 200) {
            ElMessage({
                message: res.data.msg,
                type: 'success',
                duration: 500,
                onClose: () => {
                    router.go(0)
                }
            })
        }
    })
}
</script>

<style lang="scss" scoped>
.searchBtn {
    margin-left: 170px;
}

// .el-select .el-input__wrapper{
//     padding-right: 100px;
// }

.searchTitle {
    margin: 0 0 20px;
    display: flex;
    justify-content: space-between;
    background-color: #F2F2F2;
    height: 45px;

    .pic {
        display: flex;
        align-items: center;

        img {
            width: 25px;
            height: 25px;
            padding-right: 10px;
        }
    }
}
</style>

